<template>
	<view class="confirm-order bg-color">
		<view class="line"></view>
		<!-- 地址 -->
		<view class="order-content" @click="goPathList">
			<!-- 有默认地址时 -->
			<template v-if="path">
				<view class="content-tittle">
					<view class="tittle-name">收件人：{{path.name}}</view>
					<view class="">{{path.phone}}</view>
				</view>
				<view class="order-map">收货地址：{{path.city}}--{{path.address}}</view>
			</template>
			<!-- 无默认地址时 -->
			<template v-else>
				<view class="content-tittle2">
					暂无默认地址，前去选择>>>
				</view>
			</template>
		</view>
		<!-- 商品 -->
		<view class="goods-list">
			
			<view class="goods-content">
				<image class="goods-img" src="../../static/img/Furnishing3.jpg" mode=""></image>
				<view class="goods-text">
					<view class="goods-name">商品名称商品名称商品名称商品名称</view>
					<view class="goods-color" >颜色分类：粉色</view>
					<view class="goods-size" >尺码：39</view>
					<view class="f-active-color" style="font-size: 24rpx;">七天无理由退货</view>
				</view>
				<view class="">
					<view class="">￥299</view>
					<view class="f-color">*1</view>
				</view>
			</view>
			
			<view class="goods-content">
				<image class="goods-img" src="../../static/img/Furnishing3.jpg" mode=""></image>
				<view class="goods-text">
					<view class="goods-name">商品名称商品名称商品名称商品名称</view>
					<view class="goods-color" >颜色分类：粉色</view>
					<view class="goods-size" >尺码：39</view>
					<view class="f-active-color" style="font-size: 24rpx;">七天无理由退货</view>
				</view>
				<view class="">
					<view class="">￥299</view>
					<view class="f-color">*1</view>
				</view>
			</view>
			
			<view class="goods-content">
				<image class="goods-img" src="../../static/img/Furnishing3.jpg" mode=""></image>
				<view class="goods-text">
					<view class="goods-name">商品名称商品名称商品名称商品名称</view>
					<view class="goods-color" >颜色分类：粉色</view>
					<view class="goods-size" >尺码：39</view>
					<view class="f-active-color" style="font-size: 24rpx;">七天无理由退货</view>
				</view>
				<view class="">
					<view class="">￥299</view>
					<view class="f-color">*1</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="order-foot">
			<view class="total">合计：<text class="foot-text">￥3799.00</text></view>
			<view class="confirm" @click="goPayment">提交订单</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from "vuex";
	export default {
		data() {
			return {
				path:false,
			}
		},
		onLoad() {
			// 如果有默认地址的赋值
			if (this.defaultPath.length>0) {
				// console.log(this.defaultPath[0]);
				this.path = this.defaultPath[0];
				// console.log(123);
			}
			// uni.$on(eventName,callback)    监听全局的自定义事件，事件由 uni.$emit 触发，回调函数会接收事件触发函数的传入参数。
			uni.$on('selectPathItem',(res)=>{
				// console.log(res);
				this.path = res;
			})
		},
		onUnload() {
			// 移除全局自定义事件监听器。
			uni.$off('selectPathItem',()=>{
				/* 
				如果uni.$off没有传入参数，则移除App级别的所有事件监听器；
				如果只提供了事件名（eventName），则移除该事件名对应的所有监听器；
				如果同时提供了事件与回调，则只移除这个事件回调的监听器；
				提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器； 
				*/
				console.log('移除了');
			})
		},
		computed:{
			...mapGetters(['defaultPath'])
		},
		methods: {
			// 跳转至地址管理页面
			goPathList(){
				uni.navigateTo({
					url:'/pages/config-path/config-path?type=selectPath'
				})
			},
			// 跳转至确认支付页
			goPayment(){
				uni.navigateTo({
					url:'/pages/payment/payment'
				})
			}
		}
	}
</script>

<style scoped>
	.line {
		width: 100%;
		height: 2rpx;
		background-color: #E1E1E1;
	}
	.confirm-order{
		position: absolute;
		height: 100%;
		width: 100%;
	}
	.order-content{
		background-color: #ffffff;
		line-height: 40rpx;
		padding: 20rpx;
	}
	.content-tittle{
		display: flex;
		justify-content: space-between;
	}
	.content-tittle2{
		text-align: center;
	}
	.tittle-name{
		font-weight: bold;
	}
	.order-map{
		
	}
	
	.goods-list{
		background-color: #ffffff;
		margin-top: 20rpx;
		padding: 20rpx 0;
		/* border: 2rpx solid black; */
	}
	
	.goods-content{
			padding: 10rpx 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff;
		}
		.goods-text{
			/* width: 360rpx; */
			padding: 0 10rpx;
			font-size: 26rpx;
			/* background-color: #f8f8f8; */
		}
		.goods-name{
			width: 200px;   
			overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
			text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
			white-space: nowrap;     /*文本不换行*/
		}
		.goods-img{
			width: 160rpx;
			height: 160rpx;
		}
		.goods-size{
			font-size: 22rpx;
			color: #636263;
		}
		.goods-color{
			font-size: 22rpx;
			color: #636263;
		}
		
		.order-foot{
			height: 80rpx;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 10rpx 0 20rpx;
			box-sizing: border-box;
		}
		.total{
			/* padding-left: 20rpx; */
		}
		.foot-text{
			font-weight: bold;
			font-size: 40rpx;
		}
		
		.confirm{
			color: #ffffff;
			background-color: #49BDFB;
			padding: 10rpx 30rpx;
			/* font-size: 30rpx; */
			/* margin-right: 10rpx; */
		}
</style>
